<template>
    <div id="integralRecord">
        <div class="title">积分记录</div>
        <!-- 列表 -->
        <div class="content">
            <el-table :data="listData" style="width: 100%" highlight-current-row>
                <el-table-column prop="name" width="auto" align="center"></el-table-column>
                <el-table-column prop="address" width="auto" align="center"></el-table-column>
                <el-table-column prop="date" width="auto" align="center"></el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="paging">
            <!-- :total="listData.length"
            @pagination="getListData" -->
            <el-pagination background v-show="pageSize > 0"
                :total="45" layout="prev, pager, next"
                prev-text="上一页" next-text="下一页"
                :page-size="pageSize" @current-change="clickChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
            listData: [{
                date: '2021-3-5-10:20:35',
                name: '观看直播三十分钟',
                address: '+10'
            }, {
                date: '2021-3-5-10:20:35',
                name: '收藏一条资源',
                address: '+3'
            }, {
                date: '2021-3-5-10:20:35',
                name: '取消活动预定',
                address: '-10'
            }, {
                date: '2021-3-5-10:20:35',
                name: '完善资料',
                address: '+10'
            }], // 列表内容
            pageNum: 1, //显示第几页
            pageSize: 6, //一页的数据数量
        };
	},
    mounted(){},
	methods: {
        // 当前页
        clickChange(val) {
            this.pageNum = val;
            // console.log(this.pageNum)
            // this.getListData();
        },
    },
    watch: {},
}
</script>

<style scoped lang="less">
@media screen and (min-width: 1400px){
    #integralRecord{
        padding: 3% 5%;
        .title{
            width: 100%;
            font-size: 24px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        // 列表
        .content{
            width: 100%;
            // height: 530px;
            height: 450px;
            overflow: auto;
            /deep/ .el-table__header-wrapper{
                height: 0;
            }
            /deep/ .el-table_1_column_2 .cell{
                color: #F19417;
            }
        }
        // 分页
        .paging{
            width: 100%;
            margin-top: 5%;
            // 水平垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                background-color: #F19417;
            }
            .page{
                width: 7%;
                text-align: center;
                line-height: 30px;
                background: #F0F0F0;
                border-radius: 2px;
                margin: 0% 0.5%;
            }
        }
    }
}



@media screen and (max-width: 1400px){
    #integralRecord{
        padding: 2% 4%;
        .title{
            width: 100%;
            font-size: 22px;
            padding-bottom: 2%;
            border-bottom: 1px solid #ddd;
        }
        // 列表
        .content{
            width: 100%;
            // height: 530px;
            height: 450px;
            overflow: auto;
            /deep/ .el-table__header-wrapper{
                height: 0;
            }
            /deep/ .el-table_1_column_2 .cell{
                color: #F19417;
            }
        }
        // 分页
        .paging{
            width: 100%;
            margin-top: 5%;
            // 水平垂直居中
            display: flex;
            justify-content: center;
            align-items: center;
            /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
                background-color: #F19417;
            }
            .page{
                width: 7%;
                text-align: center;
                line-height: 30px;
                background: #F0F0F0;
                border-radius: 2px;
                margin: 0% 0.5%;
            }
        }
    }
}
</style>